<template>
  <div>
    <ul :key="pager.pageIndex">
      <li
        class="comment-li"
        :class="pager.pageIndex + '-' + index"
        v-for="(item, index) in comments"
        :key="pager.pageIndex + '-' + index"
      >
        <div class="com-u" :key="pager.pageIndex + '-' + index">
          <Avatar
            :key="Math.random().toString()"
            :avatar="{
              id: pager.pageIndex + '-' + index,
              username:
                item.nickname && item.nickname.length > 0
                  ? item.nickname
                  : item.username,
              txcolor: item.txcolor,
              bgcolor: item.bgcolor,
            }"
          />
          <span class="un"
            >{{
              item.nickname && item.nickname.length > 0
                ? item.nickname
                : item.username
            }}：</span
          >
        </div>

        <div class="com-c">
          <div>
            <el-rate
              v-model="item.starLevel"
              :colors='colors'
              disabled
            >
            </el-rate>
          </div>
          <div>
            <span class="content">{{ item.comment }}</span>
          </div>
          <div class="fb-time">
            <span>{{ item.commentAt }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang='scss' scoped>
.commentBtn {
  padding-top: 30px;
  display: flex;
  flex-direction: row-reverse;
}
.comment-li {
  padding: 4px 0 10px 0px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #e8eaee;
  display: flex;
  .com-u {
    position: relative;
    .un {
      position: absolute;
      font-weight: 800;
      width: 100px;
      top: 10px;
      left: 55px;
    }
  }

  .com-c {
    word-wrap: break-word;
    margin-top: 10px;
    margin-left: 70px;
    // display: flex;
    // align-items: flex-end;
    .fb-time {
      margin-top: 10px;
      color: #555;
      font-size: 12px;
    }
  }

  .un {
    // margin-left: 5px;
    color: #555666;
    font-weight: 400;
    // display: flex;
    // align-items: center;
    font-size: 15px;
  }
  .content {
    // display: flex;
    // align-items: center;
    // margin-left: 18px;
    // padding-left: 20px;
    word-wrap: break-word;
    color: #222226;
    font-size: 14px;
  }
}
.fyq {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

ul {
  list-style-type: none;
}
</style>

<script>
// import { publishComment, getComment } from '../../api/comment'

// import formatTime from "../../utils/formatTime";
import Avatar from '../../../components/Avatar'

export default {
  data () {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#EB5E26'],
      comments: [],
      pager: {
        pageIndex: 1,
        pageSize: 10,
        count: 15
      }
    }
  },
  components: {
    Avatar
  },
  mounted () {
    // this.featchData();
    this.comments = [
      {
        id: 1,
        username: '六位',
        nickname: '了哈',
        txcolor: '#ffffff',
        bgcolor: 'orange',
        commentAt: '2020-12-3 12:40',
        starLevel: 2,
        comment: '差评、差评、差评，太垃圾了'
      },
      {
        id: 2,
        username: '明天',
        nickname: '人人',
        txcolor: '#ffffff',
        bgcolor: '#FF0036',
        commentAt: '2020-12-3 12:40',
        starLevel: 4,
        comment: '好评，便宜，质量超棒！！！！'
      },
      {
        id: 3,
        username: '命名为',
        nickname: '而我却',
        txcolor: '#ffffff',
        bgcolor: '#409EFF',
        commentAt: '2020-12-3 12:40',
        starLevel: 5,
        comment:
          '手机黑色的我以为会很丑 拿回来才发现 很喜欢这个颜色，打游戏90帧真好、拍照和音质都挺好的 手机这个壁纸我特别喜欢。喜欢买的朋友 早买早享受手机各方面性能都特别好，也是米粉一枚，就是米11的手机放歌后盖震动小缺陷其他都挺好，反正平时都是耳机听歌问题不大，充电大概要45分钟左右充满，像素杠杠的，本来想等Pro的，忍不住要换了，不知道还要多久才发布也不一定抢得到，考虑了很久还是决定换了11，幸好闺蛮推荐的,用这个京东活动限时绢9栢那,是聊天工具PRO再连上了8再65。总体来说都很棒！屏幕显示效果真的是很不错，非常细腻，拍照效果也非常好，电池续航还可以，一直玩耗电就快，什么手机都一样，正常用一天一充没问题，通话质量也没问题很清晰。音乐开大后盖确实有共振，不过也不影响使用像素超级棒，原相机也能扛得住 电池续航：还可以，中度用的话，白天充一次电吧 运行速度：我买的12＋256，超级快 种草好久的米11，终于没有让我失望，值得买。对于说CPU翻车的，对我来说无所谓，我不玩大型游戏。 显示效果：色彩很棒，多肉边边的毛也可以拍出来昨天到的货，试了一天才来评价，第一感觉让我觉得手机很轻薄，骁龙888处理'
      }

    ]
  },
  methods: {
    errorHandler () {
      return true
    },
    featchData () {
      // getComment(this.$route.params.id, this.pager).then(({ data }) => {
      //   console.log('评论', data)
      //   this.comments = []
      //   data.data.data.forEach((element) => {
      //     this.comments.push({
      //       id: element.id,
      //       username: element.username,
      //       nickname: element.nickname,
      //       txcolor: element.txcolor,
      //       bgcolor: element.bgcolor,
      //       commentAt: formatTime(element.createdTime),
      //       comment: element.commentContent
      //     })
      //   })
      //   this.pager.pageIndex = data.data.pager.pageIndex
      //   this.pager.pageSize = data.data.pager.pageSize
      //   this.pager.count = data.data.pager.rowsTotal
      //   // this.$emit('commentcount', this.pager.count)
      // })
    },
    feathcomments () {
      // if (!isAuth()) {
      //   this.$router.push('/login')
      //   return
      // }
      // if (this.textarea.trim().length < 1) {
      //   this.$message.warning('评论内容不能为空')
      //   return
      // }
      // var uid = getTokenValueData().userId
      // publishComment({
      //   commentContent: this.textarea,
      //   userId: uid,
      //   articlesId: this.$route.params.id
      // }).then(({ data }) => {
      //   this.comments.push({
      //     url: require('@/assets/logo.png'),
      //     username: getTokenValueData().username,
      //     comment: data.data.commentContent,
      //     txcolor: getTokenValueData().txcolor,
      //     bgcolor: getTokenValueData().bgcolor,
      //     commentAt: formatTime(data.data.createdTime)
      //   })
      //   this.textarea = ''
      //   this.pager.count++
      // })
    },

    // 页码变化触发事件
    handleIndex (val) {
      this.pager.pageIndex = val
      this.featchData()
    }
  },
  props: {
    commentfocus: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // commentfocus() {
    //   // console.log(this.commentfocus)
    // },
    // "pager.count"(count) {
    //   // console.log('评论数量增加了', count)
    //   this.$emit("commentcount", count);
    // },
  }
}
</script>

<style>
</style>
